import { App } from 'vue'
import skeleton from './skeleton/index.vue'
import carousel from './carousel/index.vue'
import more from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/logo.png'
// 面包屑组件
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from './city/index.vue'
import XtxNumbox from './numbox/index.vue'
import XtxButton from './button/index.vue'
import XtxCheckbox from './checkbox/index.vue'
import XtxMessage from './message/index.vue'
import XtxConfirm from './confirm/confirm.vue'
import XtxDialog from './dialog/index.vue'
export default {
  install(app:App){
    app.component('XtxSkeleton',skeleton)
    app.component('XtxCarousel',carousel)
    app.component('XtxMore',more)
    app.component('XtxBread',Bread)
    app.component('XtxBreadItem',BreadItem)
    app.component('XtxCity',XtxCity)
    app.component('XtxNumbox',XtxNumbox)
    app.component('XtxButton',XtxButton)
    app.component('XtxCheckbox',XtxCheckbox)
    app.component('XtxMessage',XtxMessage)
    app.component('XtxConfirm',XtxConfirm)
    app.component('XtxDialog',XtxDialog)
    app.directive('lazy',{
      mounted(el:HTMLImageElement,binding){
     const {stop} =  useIntersectionObserver(el,([{isIntersecting}])=>{
          if(isIntersecting){
            stop()
            el.src = binding.value
            el.onerror = ()=>{
              el.src = defaultImg
            }
          }
        })
      }
    })
  }
}
